@()(implicit session: Session)
    @diversity.main("分析结果") {

        <style>
                .update {
                    border-radius: 15px 15px 15px 15px;
                    background-color: transparent;
                    color: gray;
                    border: 0px;
                }

                .update:hover {
                    color: gray;
                    background-color: lightgray;
                }

                .fastq {
                    background-color: transparent;
                    color: gray;
                    border: 0px;
                }

                .fastq:hover {
                    color: black;
                    text-decoration: underline;
                }

                .delete {
                    border-radius: 15px 15px 15px 15px;
                    background-color: transparent;
                    color: gray;
                    border: 0px;
                }

                .delete:hover {
                    color: white;
                    background-color: red;
                }

                .state {
                    display: none;
                }

                .layui-layer-title {
                    background-color: #428BCA;
                    height: 55px;
                }

                td {
                    white-space: nowrap;
                }
        </style>


                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="portlet blue-madison box">

                            <div class="portlet-title">
                                <div class="caption">
                                    分析结果
                                </div>
                            </div>


                            <div class="portlet-body" id="t">

                                <div class="table-responsive" >

                                    <table class="display table table-bordered table-hover table-striped" id="table" data-pagination="true" data-search="true"
                                    data-search-align="left" data-page-list="[10, 25, 50, 100]" data-multiple-search="true">

                                        <thead>
                                            <tr>
                                                <th data-field="otuname" data-sortable="true" id="otuname">任务名</th>
                                                <th data-field="createdate" data-sortable="true" id="createdata">创建时间</th>
                                                <th data-field="state" data-sortable="true" id="state">运行状态</th>
                                                <th data-field="otuseqs" data-sortable="true" id="otuseqs">OTU数目</th>
                                                <th data-field="results" data-sortable="false" id="results">结果一览</th>
                                                <th data-field="operation" data-sortable="false" id="operation">操作</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


        <div id="rest" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">
                            <span id="lblAddTitle" style="font-weight: bold">重新运行OTU聚类和分类学注释：</span>
                        </h4>
                    </div>
                    <form id="resetForm" data-toggle="validator" class="registration-form form-horizontal">
                        <div class="modal-body">
                            <div class="row-fluid">

                                <div class="form-group">
                                    <label class="col-sm-8">
                                        样品信息：
                                    </label>
                                    <div class="col-sm-7 indent">
                                        <input class="form-control" id="samples" name="samples" readonly="readonly" >
                                    </div>
                                </div>


                                <div class="col-sm-8" style="display: none;" >
                                    <div class="form-group">
                                        <label class="control-label">
                                            ID：
                                        </label>
                                        <input class="form-control indent" id="otuIds" name="otuIds" readonly="readonly" >
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-6">Usearch otu cluster and mapping(OTU聚类和丰度计算参数设置)</label>
                                    <label class="col-sm-1">
                                        <a id="down-1" style="margin-left: 2em">
                                            <i class="fa fa-arrow-down"></i>
                                        </a>
                                        <a id="up-1" style="margin-left: 2em;
                                            display: none">
                                            <i class="fa fa-arrow-up"></i>
                                        </a>
                                    </label>
                                </div>

                                <div id="set-1" style="display: none" class="indent">


                                    <div class="form-group" >
                                        <p class="col-sm-7">
                                            Usearch 'derep_prefix' command: Specify the minimum sequence length to be included in the output.</p>
                                        <div class="col-sm-6 indent">
                                            <input name="minseqlength" id="minseqlength" class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group" >
                                        <p class="col-sm-7">
                                            Usearch 'cluster_otus' command: Specifies the OTU 'radius' as a percentage, i.e. the minimum difference between an OTU member sequence and the representative sequence of that OTU. Default is 3.0, corresponding to a minimum identity of 97%.</p>
                                        <div class="col-sm-6 indent">
                                            <input name="otu_radius_pct" id="otu_radius_pct" class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group" >
                                        <p class="col-sm-7">
                                            Usearch 'usearch_global' command: Specifies the minimum identity between a query sequence(raw data) and a database sequence(otu representative sequence)</p>
                                        <div class="col-sm-6 indent">
                                            <input name="id" id="id" class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <p class="col-sm-7">
                                            cluster_otus(cluster) and usearch_global(mapping) strand:</p>
                                        <div class="col-sm-6 indent">
                                            <select class="form-control" name="strand" id="strand">
                                                <option value="plus">plus</option>
                                                <option value="both">both</option>
                                            </select>
                                        </div>
                                    </div>

                                </div>

                                <div class="form-group">
                                    <label class="col-sm-6">RDP classifier assign taxonomy(分类学注释参数设置)</label>
                                    <label class="col-sm-1">
                                        <a id="down-2" style="margin-left: 2em">
                                            <i class="fa fa-arrow-down"></i>
                                        </a>
                                        <a id="up-2" style="margin-left: 2em;
                                            display: none">
                                            <i class="fa fa-arrow-up"></i>
                                        </a>
                                    </label>
                                </div>

                                <div id="set-2" class="indent">

                                    <div class="form-group">
                                        <p class="col-sm-7">
                                            Select Database:</p>
                                        <div class="col-sm-6 indent">
                                            <select class="form-control" name="db_1" id="db_1">
                                                <option value="greengenes.16s">greengenes.16s</option>
                                                <option value="greengenes.16s_archaea">greengenes.16s_archaea</option>
                                                <option value="greengenes.16s_bacteria">greengenes.16s_bacteria</option>
                                                <option value="rdp.16s">rdp.16s</option>
                                                <option value="rdp.16s_archaea">rdp.16s_archaea</option>
                                                <option value="rdp.16s_bacteria">rdp.16s_bacteria</option>
                                                <option value="silva.16s">silva.16s</option>
                                                <option value="silva.16s_archaea">silva.16s_archaea</option>
                                                <option value="silva.16s_bacteria" selected>silva.16s_bacteria</option>
                                                <option value="silva.18s_eukaryota">silva.18s_eukaryota</option>
                                                <option value="silva">silva</option>
                                                <option value="unite.its_fungi">unite.its_fungi</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <p class="col-sm-7">
                                            Taxon assignment method:</p>
                                        <div class="col-sm-6 indent">
                                            <select class="form-control" name="method_1" onchange="change(this)" id="method_1">
                                                <option value="rdp">RDP Classifier</option>
                                                <option value="uclust">Uclust consensus taxonomy assigner</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div id="rdp-1" style="display: none;">
                                        <div class="form-group" >
                                            <p class="col-sm-7 indent">
                                                Minimum confidence to record an assignment, used for rdp method </p>
                                            <div class="col-sm-6 indent-1">
                                                <input name="c" id="c" class="form-control" />
                                            </div>
                                        </div>
                                    </div>

                                    <div id="uclust-1" >
                                        <div class="form-group" >
                                            <p class="col-sm-7 indent">
                                                Number of database hits to consider when making an assignment, used for uclust method </p>
                                            <div class="col-sm-6 indent-1">
                                                <input name="uma" id="uma" class="form-control"/>
                                            </div>
                                        </div>


                                        <div class="form-group" >
                                            <p class="col-sm-7 indent">
                                                Minimum percent similarity (expressed as a fraction between 0 and 1) to consider a database match a hit, used for uclust method </p>
                                            <div class="col-sm-6 indent-1">
                                                <input name="s" id="s" class="form-control" />
                                            </div>
                                        </div>
                                    </div>


                                </div>

                            </div>
                        </div>
                        <div class="modal-footer bg-info">
                            <button type="button" class="btn blue" onclick="Running()">运行</button>
                            <button type="button" class="btn green" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div id="restRdp" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">
                            <span id="lblAddTitle" style="font-weight: bold">重新运行分类学注释</span>
                        </h4>
                    </div>
                    <form id="resetRdpForm" data-toggle="validator" class="registration-form form-horizontal">
                        <div class="modal-body">
                            <div class="row-fluid">

                                <div class="form-group">
                                    <label class="col-sm-8">
                                        任务名：
                                    </label>
                                    <div class="col-sm-7 indent">
                                        <input class="form-control" id="rdp_otuname" name="rdp_otuname" readonly="readonly" >
                                    </div>
                                </div>


                                <div class="col-sm-8" style="display: none;" >
                                    <div class="form-group">
                                        <label class="control-label">
                                            ID：
                                        </label>
                                        <input class="form-control indent" id="rdp_id" name="rdp_id" readonly="readonly" >
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-12">
                                        Select Database:</label>
                                    <div class="col-sm-6 indent">
                                        <select class="form-control" name="db_2" id="db_2">
                                            <option value="greengenes.16s">greengenes.16s</option>
                                            <option value="greengenes.16s_archaea">greengenes.16s_archaea</option>
                                            <option value="greengenes.16s_bacteria">greengenes.16s_bacteria</option>
                                            <option value="rdp.16s">rdp.16s</option>
                                            <option value="rdp.16s_archaea">rdp.16s_archaea</option>
                                            <option value="rdp.16s_bacteria">rdp.16s_bacteria</option>
                                            <option value="silva.16s">silva.16s</option>
                                            <option value="silva.16s_archaea">silva.16s_archaea</option>
                                            <option value="silva.16s_bacteria" selected>silva.16s_bacteria</option>
                                            <option value="silva.18s_eukaryota">silva.18s_eukaryota</option>
                                            <option value="silva">silva</option>
                                            <option value="unite.its_fungi">unite.its_fungi</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-12">
                                        Taxon assignment method:</label>
                                    <div class="col-sm-6 indent">
                                        <select class="form-control" name="method_2" onchange="change1(this)" id="method_2">
                                            <option value="rdp">RDP Classifier</option>
                                            <option value="uclust">Uclust consensus taxonomy assigner</option>
                                        </select>
                                    </div>
                                </div>


                                <div id="rdp-2">
                                    <div class="form-group" >
                                        <label class="col-sm-7 indent">
                                            Minimum confidence to record an assignment, used for rdp method </label>
                                        <div class="col-sm-6 indent-1">
                                            <input name="rdp_c" id="rdp_c" class="form-control"/>
                                        </div>
                                    </div>
                                </div>

                                <div id="uclust-2">
                                    <div class="form-group" >
                                        <label class="col-sm-7 indent">
                                            Number of database hits to consider when making an assignment, used for uclust method </label>
                                        <div class="col-sm-6 indent-1">
                                            <input name="rdp_uma" id="rdp_uma" class="form-control" />
                                        </div>
                                    </div>


                                    <div class="form-group" >
                                        <label class="col-sm-7 indent">
                                            Minimum percent similarity (expressed as a fraction between 0 and 1) to consider a database match a hit, used for uclust method </label>
                                        <div class="col-sm-6 indent-1">
                                            <input name="rdp_s" id="rdp_s" class="form-control"/>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div class="modal-footer bg-info">
                            <button type="button" class="btn blue" onclick="RunRdp()">运行</button>
                            <button type="button" class="btn green" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div id="logShow" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">
                            <span id="lblAddTitle" style="font-weight: bold">日志信息：</span>
                            <button type="button" class="btn-remove" data-dismiss="modal" ><i class="fa fa-remove"></i></button>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row-fluid" id="logInfo">

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="tableShow" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">
                            <span id="lblAddTitle" style="font-weight: bold">OTU Taxon Table：</span>
                            <button type="button" class="btn-remove" data-dismiss="modal" ><i class="fa fa-remove"></i></button>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row-fluid">
                            <div id="image" align="center">
                                <img src='/assets/images/timg2.gif'>
                            </div>
                            <div id="tableContent">
                                <table class="display table table-bordered table-hover table-striped" id="table_show" data-pagination="true"
                                data-page-list="[10]" data-page-size="15"
                                style="word-wrap: break-word;"
                                >
                                    <thead>
                                        <th data-field='otu_id' data-sortable='true' id="marker">OTU ID</th>
                                    </thead>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="warnShow" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 200px;">
            <div class="modal-dialog" style="width: 400px;">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h4 class="modal-title" align="center">
                            <span id="warnInfo" style="font-weight: bold">
                            </span>
                        </h4>
                    </div>
                    <div class="row-fluid" align="center" >
                        <div>
                            <img src="/assets/images/warning.png">
                        </div>
                    </div>
                    <div class="modal-footer bg-info">
                        <div align="center">
                            <button type="button" class="btn green" data-dismiss="modal" style="width: 100px;" >
                                确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="deleteShow" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 200px;">
            <div class="modal-dialog" style="width: 400px;">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h4 class="modal-title" align="center" id="title1">
                            <span id="deleteTitle" style="font-weight: bold">请确认是否删除分析结果"
                                <b id="dtask">

                                </b>"?
                            </span>
                        </h4>
                        <h4 class="modal-title" align="center" id="title2" style="display: none">
                            <span id="deleteTitle" style="font-weight: bold">删除中...</span>
                        </h4>
                        <h4 class="modal-title" align="center" id="title3" style="display: none">
                            <span id="deleteTitle" style="font-weight: bold">删除成功</span>
                        </h4>
                    </div>
                    <div class="row-fluid" align="center" >
                        <div id="warn1">
                            <img src="/assets/images/warning.png">
                        </div>
                        <div id="warn2" style="display: none;">
                            <img src="/assets/images/timg2.gif" style="height: 109px;">
                        </div>
                        <div id="warn3" style="display: none;">
                            <img src="/assets/images/success.png">
                        </div>
                    </div>
                    <div class="modal-footer bg-info">
                        <div align="center">
                            <button type="button" class="btn red" onclick="deleteTask(this)" style="width: 100px;" id="btn1">
                                确定</button>
                            <button type="button" class="btn green" data-dismiss="modal" style="width: 100px;" id="btn2">
                                取消</button>
                            <button type="button" class="btn green" onclick="updateDelete()" style="width: 100px;
                                display: none;" id="btn3">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>


                var tableHtml = $("#tableContent").html();

                $(function () {
                    tableInformation();
                    formValidation();

                    window.setInterval(function () {
                        $(".state").each(function (n, value) {
                            var st = value.value;
                            if (st == 0) {
                                updateTable();
                            }
                        })
                    }, 3000);


                })

                function formValidation() {
                    $('#resetForm').formValidation({
                        framework: 'bootstrap',
                        icon: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        },
                        fields: {
                            minseqlength: {
                                validators: {
                                    integer: {
                                        message: '必须为整数！'
                                    },
                                    greaterThan: {
                                        value: 0,
                                        message: "必须大于0！"
                                    }
                                }
                            },
                            otu_radius_pct: {
                                validators: {
                                    numeric: {
                                        message: '必须为数字'
                                    },
                                    between: {
                                        min: 0,
                                        max: 100,
                                        message: "范围：0 - 100！"
                                    }
                                }
                            },
                            id: {
                                validators: {
                                    numeric: {
                                        message: '必须为数字'
                                    },
                                    between: {
                                        min: 0,
                                        max: 1,
                                        message: "范围：0 - 1！"
                                    }
                                }
                            },
                            c: {
                                validators: {
                                    numeric: {
                                        message: '必须为数字'
                                    },
                                    between: {
                                        min: 0,
                                        max: 1,
                                        message: "范围：0 - 1！"
                                    }
                                }
                            },
                            uma: {
                                validators: {
                                    integer: {
                                        message: '必须为整数'
                                    },
                                    greaterThan: {
                                        value: 1,
                                        message: "最小值为1！"
                                    }
                                }
                            },
                            s: {
                                validators: {
                                    numeric: {
                                        message: '必须为数字'
                                    },
                                    between: {
                                        min: 0,
                                        max: 1,
                                        message: "范围：0 - 1！"
                                    }
                                }
                            }
                        }
                    });
                    $('#resetRdpForm').formValidation({
                        framework: 'bootstrap',
                        icon: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        },
                        fields: {
                            rdp_c: {
                                validators: {
                                    numeric: {
                                        message: '必须为数字'
                                    },
                                    between: {
                                        min: 0,
                                        max: 1,
                                        message: "范围：0 - 1！"
                                    }
                                }
                            },
                            rdp_uma: {
                                validators: {
                                    integer: {
                                        message: '必须为整数'
                                    },
                                    greaterThan: {
                                        value: 1,
                                        message: "最小值为1！"
                                    }
                                }
                            },
                            rdp_s: {
                                validators: {
                                    numeric: {
                                        message: '必须为数字'
                                    },
                                    between: {
                                        min: 0,
                                        max: 1,
                                        message: "范围：0 - 1！"
                                    }
                                }
                            }

                        }
                    });
                }

                function updateOtu(obj) {
                    var name = obj.value;
                    var id = obj.id;
                    $("#oldotuname").empty();
                    $("#oldotuname").val(name);
                    $("#otuId").val(id);
                    $("#update").modal("show")
                }

                function sureUpdate() {
                    var form = $("#updateForm");
                    var fv = form.data("formValidation");
                    fv.validate()
                    if (fv.isValid()) {
                        var index = layer.load(1, {
                            shade: [0.1, '#fff']
                        });
                        $.ajax({
                            url: "@routes.OtuController.updateOtuName()",
                            type: "put",
                            dataType: "json",
                            data: $("#updateForm").serialize(),
                            success: function (data) {
                                if (data.valid == "true") {
                                    layer.close(index);
                                    $("#update").modal("hide");
                                    cpm("table", "修改成功");
                                }
                            }
                        })
                    }
                }

                function restart(obj) {
                    var id = obj.value;
                    $.ajax({
                        url: "/grem/diversity/getDeploy?id=" + id,
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            if (data.valid == "false") {
                                $("#warnInfo").empty();
                                $("#warnInfo").append(data.message);
                                $("#warnShow").modal("show");
                            } else {
                                $("#set-1").hide();
                                $("#down-1").show();
                                $("#up-1").hide();
                                $("#set-2").hide();
                                $("#down-2").show();
                                $("#up-2").hide();
                                $("#otuIds").val(id);
                                $("#samples").val(data.sample);
                                $("#minseqlength").val(data.min);
                                $("#otu_radius_pct").val(data.otupct);
                                $("#id").val(data.id);
                                $("#strand").val(data.strand);
                                $("#db_1").val(data.db);
                                $("#method_1").val(data.method);
                                if (data.method == "rdp") {
                                    $("#rdp-1").show();
                                    $("#uclust-1").hide()
                                } else {
                                    $("#rdp-1").hide();
                                    $("#uclust-1").show()
                                }
                                $("#c").val(data.c);
                                $("#uma").val(data.uma);
                                $("#s").val(data.s);
                                $("#rest").modal("show")
                            }
                        }
                    })
                }

                function openRdp(obj) {
                    var id = obj.value;
                    $.ajax({
                        url: "/grem/diversity/getRdpDeploy?id=" + id,
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            $("#rdp_id").val(id);
                            $("#rdp_otuname").val(data.otuname);
                            $("#rdp_c").val(data.c);
                            $("#method_2").val(data.method);
                            if (data.method == "rdp") {
                                $("#rdp-2").show();
                                $("#uclust-2").hide()
                            } else {
                                $("#rdp-2").hide();
                                $("#uclust-2").show()
                            }
                            $("#db_2").val(data.db);
                            $("#rdp_uma").val(data.uma);
                            $("#rdp_s").val(data.s);
                            $("#restRdp").modal("show");
                        }
                    });
                }

                function RunRdp() {
                    var form = $("#resetRdpForm");
                    var fv = form.data("formValidation");
                    fv.validate();
                    if (fv.isValid()) {
                        $.ajax({
                            url: "@routes.OtuController.prepareRdp()",
                            type: "post",
                            dataType: "json",
                            data: $("#resetRdpForm").serialize(),
                            success: function (data) {
                                if (data.valid == "true") {
                                    $("#restRdp").modal("hide");
                                    updateTable();
                                    $.ajax({
                                        url: "/grem/diversity/runRdpCmd?id=" + data.id,
                                        type: "post"
                                    })
                                }
                            }
                        });
                    }
                }

                function openDelete(obj) {
                    var i = obj.id;
                    var name = obj.value;
                    $("#dtask").empty();
                    $("#dtask").append(name);
                    $("#btn1").val(i);
                    deleteBefore();
                    $("#deleteShow").modal("show");

                }

                function deleteTask(obj) {
                    var id = obj.value;
                    deleting();
                    $.ajax({
                        url: "/grem/diversity/deleteTask?id=" + id,
                        type: "delete",
                        dataType: "json",
                        success: function (data) {
                            if (data == "success") {
                                deleteAfter();
                            }
                        }
                    });
                }

                function updateDelete() {
                    $("#deleteShow").modal("hide");
                    updateTable();
                }

                function openLog(obj) {
                    $("#logInfo").empty();
                    var id = obj.value;
                    $.ajax({
                        url: "/grem/diversity/getLog?id=" + id,
                        type: "get",
                        dataType: "json",
                        success: function (data) {
                            $("#logInfo").append(data.log);
                            $("#logShow").modal("show")
                        }
                    })
                }

                function tableInformation() {
                    $.ajax({
                        url: "@routes.OtuController.getAllTask()",
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            $('#table').bootstrapTable({data: data});
                        }
                    })
                }

                function updateTable() {
                    $.ajax({
                        url: "@routes.OtuController.getAllTask()",
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            $("#table").bootstrapTable('load', data);
                        }
                    });
                }

                function Running() {
                    var form = $("#resetForm")
                    var fv = form.data("formValidation");
                    fv.validate();
                    if (fv.isValid()) {
                        $.ajax({
                            url: "@routes.OtuController.resetOtu()",
                            type: "post",
                            dataType: "json",
                            data: $("#resetForm").serialize(),
                            success: function (data) {
                                if (data.valid == "true") {
                                    $("#rest").modal("hide");
                                    updateTable();
                                    $.ajax({
                                        url: "/grem/diversity/runResetCmd?id=" + data.id,
                                        type: "post"
                                    })
                                }
                            }
                        })
                    }
                }

                function openTable(obj) {
                    $("#tableContent").empty();
                    $("#tableContent").html(tableHtml);
                    $("#image").show();
                    $("#tableContent").hide();
                    $("#tableShow").modal("show");
                    var id = obj.id;
                    $.ajax({
                        url: "/grem/diversity/getTax?id=" + id,
                        type: "get",
                        dataType: "json",
                        success: function (data) {
                            refreshContent(data);
                            $("#image").hide();
                            $("#tableContent").show();
                        }
                    });

                }

                function refreshContent(data) {
                    var html = "";
                    $.each(data.sampleNames, function (i, v) {
                        html += "<th data-field='" + v + "' data-sortable='true'>" + v + "</th>"
                    });
                    $("#marker").after(html);
                    $('#table_show').bootstrapTable({
                        data: data.array
                    });
                }


                $("#down-1").click(function () {
                    $("#set-1").show();
                    $("#down-1").hide();
                    $("#up-1").show()
                });

                $("#up-1").click(function () {
                    $("#set-1").hide();
                    $("#down-1").show();
                    $("#up-1").hide()
                });

                $("#down-2").click(function () {
                    $("#set-2").show();
                    $("#down-2").hide();
                    $("#up-2").show()
                });

                $("#up-2").click(function () {
                    $("#set-2").hide();
                    $("#down-2").show();
                    $("#up-2").hide()
                });


                function change(element) {
                    var value = $(element).find(">option:selected").val();
                    if (value == "rdp") {
                        $("#rdp-1").show();
                        $("#uclust-1").hide()
                    } else {
                        $("#rdp-1").hide();
                        $("#uclust-1").show()
                    }
                }

                function change1(element) {
                    var value = $(element).find(">option:selected").val();
                    if (value == "rdp") {
                        $("#rdp-2").show();
                        $("#uclust-2").hide()
                    } else {
                        $("#rdp-2").hide();
                        $("#uclust-2").show()
                    }
                }
        </script>


    }